<template>
  <div class="preOrder">
    <h1>确认订单</h1>
    <el-table
      :data="currentChargeProduct"
      style="width: 100%"
    >
      <el-table-column
        label="充值产品"
        width="180"
      >
        <template v-slot="{row}">
          <el-avatar
            shape="square"
            :size="50"
            fit="scale-down"
            :src="row.imageUrl"
          >
          </el-avatar>
          <span>{{row.productName}}</span>
          <span>{{row.description}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop=""
        label="数量"
      >
        <template v-slot="{row}">
          <el-input-number
            v-model="quantity"
            :min="1"
            :max="10"
            label="描述文字"
          >
          </el-input-number>
          <i v-if="false">{{row}}</i>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="小计"
      >
        <template>
          <span> {{total_fee}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="total-fee">
      <div class="box-wrap">
        <div class="box-shadow">
          <span
            class="realpay--title"
            data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg"
          >实付款：</span>
          <span class="realpay--price-symbol">¥</span>
          <span
            class="realpay--price"
            style="color: rgb(255, 80, 0)"
          >{{total_fee}}</span>
          <div class="order-confirmAddr">
            <div class="confirmAddr-addr-user">
              <span class="confirmAddr-title">充值详情：</span><span class="confirmAddr-pro">{{currentChargeProduct[0].description}}</span>
            </div>
            <div class="confirmAddr-addr">
              <span class="confirmAddr-title">充值账户：</span><span class="confirmAddr-usn">{{userInfo.username}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button
          @click="commitOrder"
          type="danger"
        >提交订单</el-button>
      </div>
    </div>
  </div>
</template>
<script>
// 将vuex中的数据映射进来
import { mapState, mapMutations } from "vuex";
import * as shoppingApi from "../../../api/shopping";
export default {
  computed: {
    ...mapState(["currentChargeProduct", "userInfo"]),
    total_fee() {
      return this.quantity * this.currentChargeProduct[0].price;
    },
  },
  data() {
    return {
      quantity: 1, //购买数量
    };
  },
  methods: {
    ...mapMutations(["SET_ORDER_ID"]),
    commitOrder() {
      this.$confirm("此操作将支付订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //   1.发起请求 提交订单 后端会返回生成的订单号
          let product_id = this.currentChargeProduct[0].product_id;
          let quantity = this.quantity;
          shoppingApi.preOrderApi(product_id, quantity).then((res) => {
            if (res.data.state) {
              // 订单创建成功
              // 2.跳转到支付页面 根据订单号 发送请求 获取订单详情
              let order_id = res.data.order_id; //后台返回的订单id
              // 通过订单id可以发起支付
              this.$router.push({ name: "pay" });
              this.SET_ORDER_ID(order_id);

              this.$message({
                type: "success",
                message: "订单提交成功!",
              });
            } else {
              this.$message.error("订单提交失败");
            }
          }); //得到订单详情 然后还需要发送支付请求
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>